<#include "/default/_inc/_head.html"/>
<#include "/default/_inc/_layout2.html"/>
<!DOCTYPE HTML>
<html lang="${lang}">

<head>
    <@head />
</head>

<body id="blog">
    <@layout>
    <div>
        <div class="toppic">
            <div class="am-container-1">
            </div>
        </div>

        <div>
            <ul class="product-show-ul">
                <#if articles?? && (articles?size> 0) >
                <#list articles as article>
                <li ${article?is_even_item?string( 'class="gray-li"', '')}>
                    <div class="product-content">
                        <div class="left am-u-sm-12 am-u-md-6 am-u-lg-6 product-content-left">
                            <div class="product-show-title">
                                <h3>
                                    <a href="/article/${article.articleId}">${article.title}</a>
                                </h3>
                            </div>

                            <div class="product-show-content">                                        
                                <div class="product-intro">
                                    <div>
                                        <p>${article.description}</p>
                                    </div>
                                    <i class="am-icon-tasks"></i>
                                </div>
                            </div>
                        </div>
                        <div class="right am-u-sm-12 am-u-md-6 am-u-lg-6 product-content-right">
                            <img class="product-img" src="${article.image}" onerror="this.src='/img/not-img.gif'" />
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
                </#list>
                </#if>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
    </@layout>
    <script type="text/javascript">
        //获取滚动条当前的位置
        function getScrollTop() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            }
            else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        //获取当前可是范围的高度
        function getClientHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            }
            else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度
        function getScrollHeight() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }
        var currentPage = 2;
        var isload = true, loading = false;
        window.onscroll = function () {
            if (!isload) {
                return false;
            }
            if (getScrollTop() + getClientHeight() > getScrollHeight() - $('.footer').height()) {
                if (loading) return;
                loading = true;
                var data = {};
                data.currentPage = currentPage;
                $.ajax({
                    type: "POST",
                    data: data,
                    dataType: 'html',
                    url: '/category/dataPage/${categoryId}',
                    success: function (res) {
                        if (res.trim()) {
                            currentPage++;
                            $('.product-show-ul').append(res);

                        } else {
                            //layer.alert(res.message, {icon: 2});
                            isload = false;
                        }
                        loading = false;
                    }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                        loading = false;
                        console.log(errorThrown)
                    },
                });
            }
        }
    </script>
</body>

</html>